.case {
   width: 280px;
   height: 500px;
   border-radius: 40px 40px 0 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-image: var(--speaker-bg);
   box-shadow: 
       0 0 2px rgba(0, 0, 0, 0.8),
       inset 0 1px 1.5px rgba(255, 255, 255, 0.6),
       inset 0 2px 5px rgba(255, 255, 255, 0.2),
       inset 0 -1px 1.5px rgba(0, 0, 0, 0.4),
       inset 0 -2.5px 4px rgba(0, 0, 0, 0.2),
       inset 2px 0 4px rgba(0, 0, 0, 0.25),
       inset -2px 0 4px rgba(0, 0, 0, 0.25),
       inset 0 0 6px rgb(255, 255, 255,.55),
       inset 0 0 14px rgb(0, 0, 0,.35);
}
.case.boom {
   animation: boomCase 500ms infinite;
}
.case.boom .rd:before {
   animation: boom2 500ms infinite;
}
.case.boom .rd:after {
   animation: boom1 500ms infinite;
}
.case.boom .brand {
   animation: boomBrand 500ms infinite;
}
.case .brand {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   top: 22px;
   color: #dadada;
   text-align: center;
   width: 300px;
   left: 0;
   z-index: 22;
   font-family: 'Yellowtail', cursive;
   color: #dadada;
   font-size: 25px;
   text-shadow: 1px 1px 1px #000;
   transform: scale(1);
}
.rd {
   margin: 0 auto;
   background: radial-gradient(circle,rgba(46, 46, 46, 1) 8%, rgba(255, 255, 255, 1) 44%, rgba(61, 61, 61, 1) 62%);
   position: relative;
   box-shadow:
    inset 0 12px 14px rgba(255,255,255,0.04),
    inset 0 -18px 22px rgb(54, 54, 54,0.95),
    inset 0 0 30px rgba(0,0,0,1);

}
.rd#sm {
   width: 120px;
   height: 120px;
   border-radius: 5px;
   border-radius: 100%;
   margin-top: 65px;
   border: 5px double #1a1a1a;
}
.rd#big {
   margin-top: 30px;
   width: 200px;
   height: 200px;
   border-radius: 5px;
   border-radius: 100%;
   border: 10px double #1a1a1a;
}
.rd:before {
   content: '';
   width: 80%;
   height: 80%;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 100%;
   display: block;
   background: #3e4243;
   background-image: linear-gradient(to top left, #04ff00 10%, #252a2b);
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .6);
   z-index: 1;
}
.rd:after {
   content: '';
   width: 35%;
   height: 35%;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 100%;
   display: block;
   background: #0f1010;
   background-image: radial-gradient(#303435 5%, #000);
   z-index: 3;
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .5);
}
@keyframes boom1 {
   0%, 100% {
     width: 35%;
     height: 35%;
     border-radius: 5px;
     border-radius: 100%;
  }
   20% {
     width: 40%;
     height: 40%;
     border-radius: 5px;
     border-radius: 100%;
     box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .3);
  }
}
@keyframes boom2 {
   0%, 100% {
     width: 80%;
     height: 80%;
     border-radius: 5px;
     border-radius: 100%;
  }
   20% {
     width: 82%;
     height: 82%;
     border-radius: 5px;
     border-radius: 100%;
     box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .7);
  }
}
@keyframes boomCase {
   0%, 100% {
     box-shadow: 0px 8px 10px 3px rgba(0, 0, 0, .2);
  }
   20% {
     box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, .7);
  }
}